<template>
  <div class="main_box">
    <el-row class="header-row">
      <el-col>
        <div class="search_wrap">
          <el-form :inline="true" :model="filters" class="demo-form-inline" ref="searchForm">
            <el-form-item prop="itemName">
              <el-input v-model="filters.itemName" placeholder="价格模板名称2" clearable></el-input>
            </el-form-item>
            <el-form-item prop="state">
              <el-select v-model="filters.state" placeholder="状态" clearable>
                <el-option v-for="item in stateList" :disabled="item.disabled" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" id="searchButton" @click="onSearch">查询</el-button>
              <el-button icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col>
        <div class="opration_wrap">
          <el-tooltip content="刷新" placement="top">
            <el-button circle icon="el-icon-refresh-right" @click="reload" size="mini"></el-button>
          </el-tooltip>
          <div>
            <el-button type="info" size="mini" plain icon="el-icon-s-order" @click="handleClickSubItem()"> 子项目列表</el-button>
            <el-button type="primary" v-has="permissionAdd" plain icon="fa fa-plus" @click="handleClickAdd()" size="mini"> 新增</el-button>
            <el-button type="success" plain size="mini" icon="fa fa-plus" v-has="permissionImport" @click="handleClickImport()"> 导入</el-button>
            <el-button type="success" plain size="mini" icon="fa fa-plus" v-has="permissionExport" @click="handleClickExport()"> 导出</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row ref="tableRow">
      <!-- 列表 -->
      <el-table :data="dataList" :fit="true" highlight-current-row>
        <el-table-column prop="itemName" label="项目组名称" width="300"></el-table-column>
        <el-table-column prop="itemCode" label="项目组编号" width="150" align="center"></el-table-column>
        <el-table-column prop="itemShortName" label="简称" width="150"></el-table-column>
        <el-table-column prop="itemTime" label="检测时长" width="150"></el-table-column>
        <el-table-column prop="itemPrice" label="收费价格" width="150" :formatter="formatPrice"></el-table-column>
        <el-table-column label="状态" width="150">
          <template slot-scope="scope">
            <!-- :disabled="true" -->
            {{ scope.row.state == 0 ? '已禁用' : '已启用' }}
            <!-- <el-switch
              v-operate="permissionUpStatus"
              v-model="scope.row.state"
              :active-value="1"
              :inactive-value="0"
              @change="handleClickState($event, scope.row, scope.$index)"
            >
            </el-switch> -->
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间"></el-table-column>

        <el-table-column label="操作" width="300" fixed="right">
          <template slot-scope="scope">
            <el-button v-has="permissionCheck" @click="handleClickDetail(scope.row)" size="mini">查看</el-button>
            <el-dropdown trigger="click" size="small">
              <el-button type="primary"> <i class="fa fa-list-ul"></i>更多 </el-button>
              <el-dropdown-menu slot="dropdown">
                <!--1.启用 0.禁用 -1.删除-->
                <el-dropdown-item v-has="permissionEdit" v-if="scope.row.state == 1" @click.native="handleClickEditor(scope.row)">编 辑</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.state == 0" v-has="permissionState" @click.native="handleClickSuccess(scope.row, 1)">启 用</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.state == 1" v-has="permissionState" @click.native="handleClickDisable(scope.row, 0)">禁 用</el-dropdown-item>
                <el-dropdown-item v-has="permissionUpStatus" v-if="scope.row.state == 0" @click.native="handleIsDelete(scope.row, -1)">删 除</el-dropdown-item>
                <!-- <el-dropdown-item
                    v-has="permissionState" v-if="( scope.row.state == 1) "
                    @click.native="handleClickState($event,scope.row,0)">禁用
                  </el-dropdown-item>
                <el-dropdown-item
                    v-has="permissionState" v-if="(scope.row.state == 0)"
                    @click.native="handleClickState($event,scope.row,1)">启用
                  </el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页工具条 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, jumper, next, pager, prev"
        :total="page.pageTotal"
      ></el-pagination>
    </el-row>
    <uploadFile ref="uploadFile" @uploadFileList="getUploadFileList" :accept="uploadAccept" folder="hospitalsub"> </uploadFile>
  </div>
</template>
<script>
import * as message from '@/constants/message';
import ReportItemApi from '@/api/report/reportItem';
import uploadFile from '@/components/UploadFile';
import fileDownload from 'js-file-download';
import UploadRecordApi from '@/api/system/uploadRecord.js';
export default {
  name: 'ReportItemManagement',
  inject: ['reload'], //注入局部刷新
  data() {
    return {
      filters: {
        itemName: '',
        state: '',
      },
      components: {
        uploadFile,
      },
      dataList: [],
      stateList: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
        { label: '删除', value: -1, disabled: true },
      ],
      page: {
        pageNo: 1,
        pageTotal: 0,
        pageSize: 20,
      },
      uploadAccept: 'all', // 上传的文件类型 0.all 1.pdf 2.img 3.video 4.excel
      uploadData: {
        fileDesc: '',
        uploadFile: '',
      },

      permissionAdd: 'SYSTEM_MANAGER_ITEM_REPORT_LIST_ADD',
      permissionImport: 'SYSTEM_MANAGER_ITEM_REPORT_LIST_IMPORT',
      permissionExport: 'SYSTEM_MANAGER_ITEM_REPORT_LIST_EXPORT',
      permissionCheck: 'SYSTEM_MANAGER_ITEM_REPORT_LIST_SEE',
      permissionEdit: 'SYSTEM_MANAGER_ITEM_REPORT_LIST_EDIT',
      permissionUpStatus: 'SYSTEM_MANAGER_ITEM_REPORT_LIST_DELETE',
      permissionState: 'SYSTEM_MANAGER_ITEM_REPORT_LIST_STATE',
    };
  },
  created() {
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        document.getElementById('searchButton').click();
      }
    };
  },
  mounted() {
    this.init();
  },
  activated() {
    // if (this.$route.meta.keepAlive) {
    this.init();
    // }
  },
  components: {
    uploadFile,
  },
  methods: {
    // 导入
    handleClickImport() {
      let _this = this;
      _this.uploadAccept = 'excel';
      _this.$refs.uploadFile.handleCreate();
    },
    // excel导入
    getUploadFileList(val) {
      let _this = this;
      if (!val) {
        _this.$Utils.messageError('请选择文件上传');
        return;
      }
      _this.uploadData.uploadFile = val[0];
      _this.uploadData.fileDesc = 'EXCEL导入康来项目信息';
      UploadRecordApi.addUploadRecord(_this.uploadData)
        .then((res) => {
          console.log('res', res.data);
          if (res.status == 0) {
            let params = {
              uploadId: res.data,
            };
            ReportItemApi.importItemExcel(params)
              .then((res) => {
                _this.$Utils.notifySuccess();
              })
              .catch((err) => {
                console.log(err, ' ReportItemApi.importItemExcel');
              });
          } else {
            _this.$Utils.notifyError();
          }
        })
        .catch((error) => {
          console.log(error, 'UploadRecordApi.addUploadRecord');
        });
    },

    // 导出
    handleClickExport() {
      let _this = this;
      _this
        .$confirm('此操作将导出excel文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          ReportItemApi.exportItemExcel().then((res) => {
            fileDownload(res, '康来组合项目表.xlsx');
          });
        });
    },

    init() {
      let _this = this;
      _this.listData();
      _this.getTableHeight();
    },

    onSearch() {
      this.page.pageNo = 1;
      this.listData();
    },
    resetForm() {
      this.$refs.searchForm.resetFields();
      this.onSearch();
    },
    formatPrice(row, column, cellValue) {
      if (!cellValue) {
        return '未知';
      } else {
        return cellValue + ' 元';
      }
    },
    formatState(row, column, cellValue) {
      if (cellValue === -1) {
        return '已删除';
      } else if (cellValue === 0) {
        return '已禁用';
      } else if (cellValue === 1) {
        return '启用中';
      }
    },
    handleSizeChange(size) {
      let _this = this;
      _this.page.pageSize = size;
      _this.listData();
    },
    handleCurrentChange(val) {
      let _this = this;
      _this.page.pageNo = val;
      _this.listData();
    },
    handleClickDetail(row) {
      // 查看
      let _this = this;
      _this.$router.push({
        path: '/item/reportItemDetail',
        query: { id: row.itemId },
      });
    },
    handleClickEditor(row) {
      // 编辑
      let _this = this;
      _this.$router.push({
        path: '/item/reportItemAdd',
        query: { id: row.itemId },
      });
    },
    // handleClickState(event, row, index) {
    //   // event 当前信息值| state -信息值的参数 | index 当前列的下标
    //   // console.log(event+" | "+row.state+" | "+ index);
    //   let text = row.state == 0 ? "禁用" : "启用";
    //   let cond = {
    //     id: row.itemId,
    //     state: row.state
    //   };
    //   this.$confirm("确定要" + text + "该项目吗?", message.TITLE_PROMPT).then(
    //     () => {
    //       ReportItemApi.updateReportItem(cond).then(res => {
    //         this.dataList[index].state = row.state;
    //         this.$Utils.notifySuccess();
    //       });
    //     }
    //   );
    //   this.listData();
    // },
    handleClickSuccess(row, state) {
      // 启用
      let _this = this;
      let cond = {
        id: row.itemId,
        state: state,
      };
      this.$confirm('是否启用该项目', message.TITLE_PROMPT).then(() => {
        ReportItemApi.updateReportItem(cond).then((res) => {
          _this.$message({
            type: 'success',
            message: '操作成功',
          });
          _this.listData();
        });
      });
    },
    handleClickDisable(row, state) {
      // 禁用
      let _this = this;
      let cond = {
        id: row.itemId,
        state: state,
      };
      this.$confirm('是否禁用该项目', message.TITLE_PROMPT).then(() => {
        ReportItemApi.updateReportItem(cond).then((res) => {
          _this.$message({
            type: 'success',
            message: '操作成功',
          });
          _this.listData();
        });
      });
    },
    handleIsDelete(row, state) {
      // 删除
      let _this = this;
      let cond = {
        id: row.itemId,
        state: state,
      };
      this.$confirm('是否删除该项目', message.TITLE_PROMPT).then(() => {
        ReportItemApi.updateReportItem(cond).then((res) => {
          _this.$message({
            type: 'success',
            message: '操作成功',
          });
          _this.listData();
        });
      });
    },
    handleClickAdd() {
      // 新增
      let _this = this;
      _this.$router.push({
        path: '/item/reportItemAdd',
      });
    },
    handleClickSubItem() {
      // 跳转到列表中
      let _this = this;
      _this.$router.push({
        path: '/item/reportSubItemManagement',
      });
    },
    listData() {
      // 获取数据
      let _this = this;
      let cond = {
        pageNo: _this.page.pageNo,
        pageSize: _this.page.pageSize,
        itemName: _this.filters.itemName,
        state: _this.filters.state,
      };
      ReportItemApi.listReportItems(cond).then((res) => {
        _this.dataList = res.data.list;
        if (res.data.list.state) {
          this.dataList.state = String(res.data.list.state);
        }
        _this.page.pageTotal = res.data.total;
      });
    },
  },
  /*beforeRouteEnter(to,from,next){
    // 路由守卫钩子函数
    next(vm => {
      // 如果 从add或者edit中过来 那么就执行 init 方法 新增修改都是一个界面 所以不需要刷新
      //  || from.path == '/report/classifyEdit'
      if (from.path == '/item/reportItemAdd' || from.path == '/item/reportSubItemManagement') {
        vm.init();
      }
    })
  }*/
};
</script>
<style lang="scss" src="@/assets/css/views/content.scss" scope></style>
